
import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Brain, Target, Compass, Users, ArrowLeft, CheckCircle } from "lucide-react";
import { LearningStyleAssessment } from "./LearningStyleAssessment";

interface AssessmentSelectionProps {
  onClose: () => void;
}

export const AssessmentSelection = ({ onClose }: AssessmentSelectionProps) => {
  const [selectedAssessment, setSelectedAssessment] = useState<string | null>(null);
  const [completedAssessments, setCompletedAssessments] = useState<string[]>([]);

  const assessments = [
    {
      id: "learning-style",
      title: "Learning Style Assessment",
      description: "Discover your preferred learning methods and study approaches",
      icon: Brain,
      color: "blue",
      duration: "5-7 minutes",
      questions: "12 questions"
    },
    {
      id: "strengths-discovery",
      title: "Strengths Discovery",
      description: "Identify your natural talents and academic strengths",
      icon: Target,
      color: "green",
      duration: "8-10 minutes",
      questions: "15 questions"
    },
    {
      id: "interest-explorer",
      title: "Interest Explorer",
      description: "Explore your academic interests and career curiosities",
      icon: Compass,
      color: "purple",
      duration: "6-8 minutes",
      questions: "10 questions"
    }
  ];

  const recommendedCommunities = [
    {
      name: "Visual Learners Study Group",
      members: 128,
      category: "Learning Style",
      description: "For students who learn best through visual materials and diagrams"
    },
    {
      name: "STEM Excellence Hub",
      members: 245,
      category: "Academic Interest",
      description: "Connect with fellow science, technology, engineering, and math enthusiasts"
    },
    {
      name: "Creative Arts Collective",
      members: 167,
      category: "Interest Group",
      description: "Share your artistic projects and get feedback from peers"
    },
    {
      name: "Study Skills Mastery",
      members: 198,
      category: "Academic Support",
      description: "Learn and share effective study techniques and time management tips"
    }
  ];

  const handleAssessmentComplete = (assessmentId: string) => {
    setCompletedAssessments(prev => [...prev, assessmentId]);
    setSelectedAssessment(null);
  };

  if (selectedAssessment === "learning-style") {
    return (
      <LearningStyleAssessment 
        onClose={() => {
          handleAssessmentComplete("learning-style");
        }} 
      />
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="container mx-auto px-4 max-w-6xl">
        <div className="mb-8">
          <Button 
            variant="ghost" 
            onClick={onClose}
            className="mb-4 hover:bg-gray-100"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            Back to Home
          </Button>
          
          <div className="text-center">
            <h1 className="text-4xl font-bold mb-4 text-gray-900">
              Discover Your Learning Profile
            </h1>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              Take our assessments to understand your learning style, strengths, and interests. 
              Get personalized recommendations for your academic journey.
            </p>
          </div>
        </div>

        {/* Assessment Options */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
          {assessments.map((assessment) => {
            const IconComponent = assessment.icon;
            const isCompleted = completedAssessments.includes(assessment.id);
            
            return (
              <Card 
                key={assessment.id} 
                className={`hover:shadow-lg transition-all duration-300 cursor-pointer ${
                  isCompleted ? 'border-green-200 bg-green-50' : 'hover:border-gray-300'
                }`}
                onClick={() => !isCompleted && setSelectedAssessment(assessment.id)}
              >
                <CardHeader>
                  <div className="flex items-center justify-between mb-4">
                    <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${
                      assessment.color === 'blue' ? 'bg-blue-100' :
                      assessment.color === 'green' ? 'bg-green-100' : 'bg-purple-100'
                    }`}>
                      <IconComponent className={`w-6 h-6 ${
                        assessment.color === 'blue' ? 'text-blue-600' :
                        assessment.color === 'green' ? 'text-green-600' : 'text-purple-600'
                      }`} />
                    </div>
                    {isCompleted && (
                      <CheckCircle className="w-6 h-6 text-green-600" />
                    )}
                  </div>
                  <CardTitle className="text-lg">{assessment.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-gray-600 mb-4">{assessment.description}</p>
                  <div className="flex justify-between text-sm text-gray-500 mb-4">
                    <span>{assessment.duration}</span>
                    <span>{assessment.questions}</span>
                  </div>
                  <Button 
                    className="w-full" 
                    disabled={isCompleted}
                    variant={isCompleted ? "outline" : "default"}
                  >
                    {isCompleted ? "Completed" : "Start Assessment"}
                  </Button>
                </CardContent>
              </Card>
            );
          })}
        </div>

        {/* Recommended Communities */}
        <div className="bg-white rounded-lg p-8 shadow-sm">
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold mb-4 text-gray-900">
              Recommended Learning Communities
            </h2>
            <p className="text-gray-600">
              Based on your assessment results, here are some communities you might enjoy joining.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {recommendedCommunities.map((community, index) => (
              <Card key={index} className="hover:shadow-md transition-shadow">
                <CardContent className="p-6">
                  <div className="flex items-start justify-between mb-4">
                    <div>
                      <h3 className="font-semibold text-gray-900 mb-1">{community.name}</h3>
                      <Badge variant="outline" className="text-xs">
                        {community.category}
                      </Badge>
                    </div>
                    <div className="flex items-center text-gray-500">
                      <Users className="w-4 h-4 mr-1" />
                      <span className="text-sm">{community.members}</span>
                    </div>
                  </div>
                  <p className="text-gray-600 text-sm mb-4">{community.description}</p>
                  <Button size="sm" variant="outline" className="w-full">
                    Join Community
                  </Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};
